<template>
    <div>
        <breadcrumb :routerList="routerList"></breadcrumb>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="分类等级">
                <el-radio-group v-model="classType" :disabled="isDisabled" @change="radioChange" clearable>
                    <el-radio label="1">一级分类</el-radio>
                    <el-radio label="2">二级分类</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="一级分类" v-if="isOneClass" required>
                <el-form-item prop="oneClass">
                    <el-select v-model="ruleForm.oneClass" placeholder="请选择商品一级类别" clearable :disabled="isDisabled">
                        <el-option :label="item.class_name" :value="item.id" v-for="(item,index) in oneClassList" :key="index"></el-option>
                    </el-select>
                </el-form-item>
            </el-form-item>
            <el-form-item label="分类名称" prop="className">
                <el-input v-model="ruleForm.className" clearable :disabled="isDisabled" class="input"></el-input>
            </el-form-item>
			<el-form-item label="权值" prop="qz">
				<el-input v-model="ruleForm.qz" clearable :disabled="isDisabled" class="input"></el-input>
			</el-form-item>
            <el-form-item label="商品缩略图">
                <el-upload
                    class="avatar-uploader"
                    action="https://yx.tfnhg.com/oss_upload"
                    :show-file-list="false"
                    :on-success="headSuccess"
                    :on-error="headError"
                    :disabled="isDisabled">
                    <img v-if="ruleForm.headImgUrl" :src="ruleForm.headImgUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <span>注：建议上传{{picSize}}px*{{picSize}}px</span>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="goBack">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import breadcrumb from '@/components/breadcrumb.vue'
export default {
    components: {breadcrumb},
    data(){
        return {
            routerList: [
                {
                    name: '商品管理',
                    path: ''
                },
                {
                    name: '分类列表',
                    path: '/classList'
                },
                {
                    name: '商品分类',
                    path: ''
                }
            ],
            ruleForm: {
                className: '',
                headImgUrl: '',
                oneClass: '',
				qz:''
            },
            rules: {
                className: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' },
                ],
                oneClass: [
                    {  required: true, message: '请选择商品一级分类', trigger: 'change' }
                ],
				qz:[
					{required: true, message: '请输入权值', trigger: 'blur'}
				],
			
            },
            isDisabled: false,
            picSize: '90',
            isOneClass: false,
            oneClassList: [],
            mainType: '',
            classType: '1',
            classId: ''
        }
    },
    created(){
        this.mainType = this.$route.query.type
        if(this.mainType == 4){
            this.isDisabled = true
        }
        if(this.$route.query.list != ''){
            let list = this.$route.query.list
            this.getData(list)
        }
        this.getClass()
    },
    methods:{
        async getClass(){
            let res = await this.$Http.getOneClassList()
            if(res.length!=0){
                this.oneClassList = res
            }else{
                this.oneClassList = []
            }
            console.log(res)
        },
        getData(list){
            console.log(list)
            this.classId = list.id
            this.ruleForm.className = list.class_name
            this.ruleForm.headImgUrl = list.head_img
			this.ruleForm.qz = list.qz
            if(list.fid == 0){
                this.classType = '1'
                this.isOneClass = false
            }else{
                this.classType = '2'
                this.isOneClass = true
                this.ruleForm.oneClass = list.fid  
            }
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(this.ruleForm)
                    if(this.ruleForm){
                        if(this.ruleForm.headImgUrl == '' || this.ruleForm.headImgUrl == 'undefined'){
                            this.$message.err('请选择分类图片！')
                            return false
                        }
                    }
                    this.operationClass()
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        async operationClass(){
            let data = {}
            if(this.mainType == 1){
                data = {
                    class_name: this.ruleForm.className,
                    fid: this.classType==1?0:this.ruleForm.oneClass,
                    head_img: this.ruleForm.headImgUrl,
					qz:this.ruleForm.qz
                }
            }else{
                data = {
                    id: this.classId,
                    class_name: this.ruleForm.className,
                    fid: this.classType==1?0:this.ruleForm.oneClass,
                    head_img: this.ruleForm.headImgUrl,
					qz:this.ruleForm.qz
                }
            }
            console.log(data)
            let res = await this.$Http.operationClass({
               type: this.mainType,
               pro: data
            })
            console.log(res)
            if(res.code == 1){
                this.$message({
                    type: 'success',
                    message: this.mainType==1?'新增分类成功':'修改分类成功!'
                });
                this.$router.go(-1);
            }
        },
        headSuccess(response, file){
            console.log(response, file)
            this.ruleForm.headImgUrl = response
            this.$message({
                type: 'success',
                message: '上传图片成功'
            });
        },
        headError(err, file, fileList){//图片上传失败调用
            console.log(err, file, fileList)
            this.$message.error('上传图片失败!');
        },

        radioChange(value){
            console.log(value)
            switch (value) {
                case '1':
                    this.picSize = '90'
                    this.isOneClass = false
                    break;
                case '2':
                    this.picSize = '120'
                    this.isOneClass = true
                    break;
            }
        },
        goBack(){
            this.$router.go(-1);
        },
    }
}
</script>

<style>
    .demo-ruleForm{
        width: 100%;
        background: white;
        margin-top: 20px;
        padding: 20px 0;
        box-sizing: border-box;
    }
    .input{
        width: 50%;
    }
</style>
